/**
 * 右侧边导航栏sliderBox的布局和部分功能
 */
+function(){
    window.onscroll = function(){
        if(!document.querySelector('.sliderBar')){return false};
        let sliderBar = document.querySelector('.sliderBar'),
            accountBox = document.querySelector('.account-box'),
            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        sliderBar.style.top = scrollTop>=52?'0px':'52px';  
        accountBox.style.bottom = scrollTop>=52?'0px':'52px'; 
    }
    $('.gotoTop').click(function(){
        $('html').animate({scrollTop:0},300);
    })
    $(".user-cart").click(function(){
        localStorage.buyList = JSON.stringify([]);
        cartShow()
        if($(".sliderBar").css("right")=='0px'){
            $('.sliderBar').animate({
                right:-280
            },300)
        }else{
            $('.sliderBar').animate({
                right:0
            },300) 
        }
        // $('.sliderBar').toggleClass('toggleClass');
    })
    $(".user-cart")
}()
/**
 * 以下是右侧边导航栏(购物车)的功能实现
 */

 //购物车渲染功能
function cartShow(){
    // let goodsId = parseInt(localStorage.goodsId);
    let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);
    let html = "";

    cartList.forEach(item => {
        let box = `<tr class="cart-item" data-id='${item.goodsId}'>
                        <td width='25'><input class="select" type="checkbox"></td>
                        <td width='60'><a><img src='${item.imgUrl}'></a></td>
                        <td width='70'><span class="goods-title">${item.title}</span></td>
                        <td width='65'>
                            <div class="goods-numb">
                                <a class='down'>-</a>
                                <span>${item.goodsNum}</span>
                                <a class='up'>+</a>
                            </div>
                        </td>
                        <td width='60'>
                            <div class="delete-goods">x</div>
                            <div class="goods-price">${item.price}</div>
                        </td>
                    </tr>`
        html += box
    });
    $(".cart-list").html(html)

    bindEvent();
}
 
 //点击 “加入购物车” 执行此函数
function addCart(goodsNum,goodsId){
    let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);

    cartList.forEach(item=>{
        if(item.goodsId == goodsId){
            $(".goods-numb span").html(item.goodsNum);
        }
    })
    localStorage.cartList = JSON.stringify(cartList);
    console.log(cartList)
}
//为购物车上的所有按钮绑定事件
function bindEvent(){
    $(".delete-goods").click(function(){
        let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);
        let goodsId = parseInt($(this).parents("tr").attr("data-id"));
        let flag = true;
        cartList.forEach((item,index)=>{
            if(item.goodsId == goodsId){
                flag = false
                cartList = cartList.length == 1?[]:cartList
            }
            if(flag){
                cartList.splice(index,1)
            }
        })
        localStorage.cartList = JSON.stringify(cartList);
        cartShow();
    });
    // $(".selectAll").click(function(){    
    //     if(this.checked){    
    //         $(".cart-item :checkbox").attr("checked", true);   
    //     }else{    
    //         $(".cart-item :checkbox").attr("checked", false); 
    //     }    
    // });  
    $(".select").click(function(){
        let goodsNum = parseInt($(this).parents("tr").find(".goods-numb span").html());
        let goodsPrice = parseInt($(this).parents("tr").find(".goods-price").html());
        let goodsId = parseInt($(this).parents("tr").attr("data-id"));
        let selected = null;
        if(this.checked){ 
            selected = true;
            selectGoods(selected,goodsId,goodsNum,goodsPrice)
        }else{
            selected = false;
            selectGoods(selected,goodsId,goodsNum,goodsPrice)
        }
    })
    $(".up").click(function(){
        let goodsNum = $(this).siblings("span").html();
        let goodsId = $(this).parents('tr').attr("data-id");
        let goodsPrice = $(this).parents('tr').find(".goods-price").html();
        let selected = $(this).parents('tr').find(".select").is(":checked");
        goodsNum++;
        $(this).siblings("span").html(goodsNum)
        goodsNumChange(goodsNum,goodsId,goodsPrice,selected)
    });
    $(".down").click(function(){
        let goodsNum = $(this).siblings("span").html();
        let goodsId = $(this).parents('tr').attr("data-id");
        let goodsPrice = $(this).parents('tr').find(".goods-price").html();
        let selected = $(this).parents('tr').find(".select").is(":checked");
        goodsNum--;
        goodsNum = goodsNum == 0? 1 : goodsNum;
        $(this).siblings("span").html(goodsNum)
        goodsNumChange(goodsNum,goodsId,goodsPrice,selected)
    });
    $(".goCartPage").click(function(){
        let buyList = typeof localStorage.buyList =='undefined'?[]:JSON.parse(localStorage.buyList);
        console.log(buyList)
        if(buyList.length == 0){
            $(this).find('a').removeAttr("href");
        }else{
            $(this).find('a').attr("href","./cart.html");
        }
    })
}
//checkBox选择商品执行此函数
//buyList 是准备购买的数组，存放了各个商品id，数量和价格
let buyList = typeof localStorage.buyList =='undefined'?[]:JSON.parse(localStorage.buyList);
function selectGoods(selected,goodsId,goodsNum,goodsPrice){
    let totalCount = 0;
    let totalPrice = 0;
    let flag = true;
    let buyObj = {
        "goodsId":goodsId,
        "goodsNum":goodsNum,
        "goodsPrice":goodsPrice
    }
    if(selected == true){
        if(buyList.length == 0){
            buyList.push(buyObj)
        }else{
            buyList.forEach((item,index)=>{
                if(item.goodsId == goodsId){
                    item.goodsNum = goodsNum;
                    flag = false;
                }
            })
            flag?buyList.push(buyObj):"";
        }
    }else{
        buyList.forEach((item,index)=>{
            if(item.goodsId == goodsId){
               buyList.splice(index,1);
            }
        })
    }
    buyList.forEach((item,index)=>{
        totalCount += item.goodsNum;
        totalPrice += item.goodsPrice*item.goodsNum;
    })

    localStorage.buyList = JSON.stringify(buyList);

    $(".total-num").html(totalCount)
    $(".total-count span").html(totalCount)
    $(".total-price span").html(totalPrice)
}
//点击加减商品数执行此函数
function goodsNumChange(goodsNum,goodsId,goodsPrice,selected){
    let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);

    cartList.forEach(item=>{
        if(item.goodsId == goodsId){
            item.goodsNum = goodsNum;
        }
    })
    console.log(goodsNum,goodsId,goodsPrice,selected)
    selectGoods(selected,goodsId,goodsNum,goodsPrice)
    localStorage.cartList = JSON.stringify(cartList);
}